import React, {Component} from 'react';
import {Input} from 'antd'
import './style/style.less'
import {
    RightOutlined,
    SearchOutlined,
    // BorderBottomOutlined
} from '@ant-design/icons';
import {getTreeData} from "../../utils/getTreeData";
import {withRouter} from "react-router-dom"
import "@/font/iconfont.css"

class TheFunMenu extends Component {
    state = {
        dataSource: [],
        height: 0
    }

    async componentDidMount() {
        window.addEventListener('resize', this.setHeight)
        await this.getList()
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.setHeight)
    }

    setHeight = () => {
        this.setState({
            height: document.documentElement.scrollHeight
        })
    }

    getList = async () => {
        // const token = sessionStorage.getItem('RSnetToken')
        // if (token) {
        //     const res = await apiPage()
        //     if (res.code === 0) {
        //         this.setState({
        //             dataSource: getTreeData(res.data)
        //         })
        //     }
        // }
        const dataSource = JSON.parse(sessionStorage.getItem("userMenu")) || []
        const originalData = JSON.parse(sessionStorage.getItem("userMenu")) || []
        const originalData1 = originalData.filter(v => v.menuLevel === 1)
        const originalData2 = originalData.filter(v => v.menuLevel === 2)
        this.setState({
            dataSource: getTreeData(dataSource),
            originalData1,
            originalData2
        })
    }
    push = value => {
        this.props.history.push(value)
    }
    onPressEnter = e => {
        const originalData1 = JSON.parse(JSON.stringify(this.state.originalData1))
        let dataSource = this.state.originalData2.filter(v => {
            return v.menuName.includes(e.target.value)
        })
        dataSource = getTreeData(originalData1.concat(dataSource))
        dataSource = dataSource.filter(v => v.children && v.children.length)
        this.setState({
            dataSource
        })
    }

    render() {
        const {height} = this.state
        return (
            <div className='fun-menu-wrap'>
                <h1 className='fun-menu-title clearfix'>
                    <span className='fl'>功能导航</span>
                    <em className='fr'>
                        <RightOutlined/>
                    </em>
                    <div className='fun-menu-dynamic'
                         style={{height: height ? height : document.documentElement.scrollHeight, overflowY: 'auto'}}>
                        <div className='fun-menu-search'>
                            <Input onPressEnter={this.onPressEnter} prefix={<SearchOutlined/>}
                                   placeholder={'请输入关键词进行搜索'}/>
                        </div>
                        <div className='fun-menu-box'>
                            {
                                this.state.dataSource.map((v, i) => {
                                    return <div key={i}>
                                        <h1 className='fun-menu-list-title'>{v.menuName}</h1>
                                        <ul className='fun-menu-list'>
                                            {
                                                v.children && v.children.map((j, index) => {
                                                    return <li key={index} onClick={() => this.push(j.menuUrl)}>
                                                        <span className={`iconfont ${j.menuIcon}`}/>
                                                        <span className='fun-menu-list-label'>{j.menuName}</span>
                                                    </li>
                                                })
                                            }
                                        </ul>
                                    </div>
                                })
                            }

                            {/*<h1 className='fun-menu-list-title'>订单管理</h1>*/}
                            {/*<ul className='fun-menu-list'>*/}
                            {/*    <li>*/}
                            {/*        <BorderBottomOutlined/>*/}
                            {/*        <span className='fun-menu-list-label'>服务站订单</span>*/}
                            {/*    </li>*/}
                            {/*    <li>*/}
                            {/*        <BorderBottomOutlined/>*/}
                            {/*        <span className='fun-menu-list-label'>商户订单</span>*/}
                            {/*    </li>*/}
                            {/*    <li>*/}
                            {/*        <BorderBottomOutlined/>*/}
                            {/*        <span className='fun-menu-list-label'>商城订单</span>*/}
                            {/*    </li>*/}
                            {/*</ul>*/}
                        </div>
                    </div>
                </h1>
            </div>
        );
    }
}

export default withRouter(TheFunMenu);